import { TjForm } from '@/tjComponents';
import { Select } from 'antd';
import { useForm } from 'antd/es/form/Form';
import React, { useEffect } from 'react';
import { monthData, timeOrderTypeArr } from '../NxConfig/helper';
import TimeSelect from '../TimeSelect';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const NxModalContent: React.FC<INxModalContentProps> = (props) => {
  const [form] = useForm();

  useEffect(() => {
    props.getHandler &&
      props.getHandler(() => {
        return new Promise((resolve, reject) => {
          form
            .validateFields()
            .then((values: any) => {
              resolve(values);
            })
            .catch((values: any) => {
              reject(values);
            });
        });
      });
  });

  return (
    <TjForm
      form={form}
      {...layout}
      initialValues={props.values ? props.values : undefined}
      items={[
        {
          name: 'month',
          label: '月份',
          render: <Select options={monthData} mode="multiple" />,
          rules: [{ required: true, message: '请选择月份' }],
        },
        {
          name: 'timeOrderType',
          label: '时段',
          render: <Select options={timeOrderTypeArr} />,
          rules: [{ required: true, message: '请选择时段' }],
        },
        {
          name: 'programStandard',
          label: '时点',
          render: <TimeSelect />,
          rules: [{ required: true, message: '请选择时点' }],
        },
      ]}
    />
  );
};

interface INxModalContentProps {
  getHandler?: (fn: () => Promise<any>) => void;
  values?: any;
}

export default NxModalContent;
